import { createSlice, PayloadAction } from '@reduxjs/toolkit'
import { tabListState, tabState } from './types'

const initialState: tabState = {
    isCollapse: false,
    tabList: [
        {
            path: '/',
            name: 'home',
            label: '首页'
        }
    ],
    currentMenu: {}
}

const tabSlice = createSlice({
    name: 'tab',
    initialState,
    reducers: {
        collapseMenu: state => {
            state.isCollapse = !state.isCollapse
        },
        selectMenuList: (state, { payload: val }: PayloadAction<tabListState>) => {
            if (val.name !== 'home') {
                state.currentMenu = val
                // 如果已经存在的tag就不需要添加
                const result = state.tabList.findIndex(item => item.name === val.name)
                if (result === -1) {
                    state.tabList.push(val)
                }
            } else if (val.name === 'home' && state.tabList.length === 1) {
                state.currentMenu = {}
            }
        },
        closeTab: (state, { payload: val }: PayloadAction<tabListState>) => {
            let res = state.tabList.findIndex(item => item.name === val.name)
            state.tabList.splice(res, 1)
        },
        setCurrentMenu: (state, { payload: val }: PayloadAction<tabListState>) => {
            if (val.name === 'home') {
                state.currentMenu = {}
            } else {
                state.currentMenu = val
            }
        }
    }
})

export const { collapseMenu, selectMenuList, closeTab, setCurrentMenu } = tabSlice.actions
export default tabSlice.reducer
